import React from 'react';
import ReactDOM from 'react-dom';
import './components/banner.less'
import BannerList from './components/bannerList'
class Banner extends React.Component {
    state = {
      list:[1,2,3,4],
      currentIndex:0,
    }
    move=()=>{
      this.setState({
        currentIndex:this.state.currentIndex + 1
      })
    }
    animate=()=>{
      setInterval(() => {
        this.move()
      }, 3000);
    }
    componentDidMount(){
      // 类似vue的 mounted
      this.animate()
    }
    render() {
        return <div className='bannerBox'>
            <BannerList 
              list = {this.state.list}
              currentIndex = {this.state.currentIndex}
              onInitIndex = {(n)=>{this.setState({currentIndex:n})}}
            />
        </div>;
    }
}

ReactDOM.render(<Banner/>,document.getElementById('root'))